<template>
  <div class="list-content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item>
        <el-select filterable @change="getList(1)" v-model="formInline.organizationId" placeholder="请选择业主单位">
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addPlan()">新增</el-button>
        <el-button type="primary" @click="insertPlan()">插入模版</el-button>
        </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%">
      <el-table-column
      label="序号"
      type="index"
      width="50">
      </el-table-column>
      <el-table-column
      prop="name"
      label="姓名">
      </el-table-column>
      <el-table-column
      prop="phone"
      label="常用电话号码">
      </el-table-column>
      <el-table-column 
      label="操作"
      width="140">
        <template slot-scope="scope">
          <el-button  @click="addPlan(scope.$index, scope.row)" type="text" size="small">修改</el-button>
          <span class="dividing-line">|</span>
          <el-button  @click="delPlan(scope.$index, scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="常用电话维护"
      width="600px"
      top='10vh'
      v-if="dialogFalg"
      :visible.sync="dialogFalg"
      @close="closeDialog"
      v-dialogDrag>
      <edit-form :editInfo="editInfo" :organizationId="formInline.organizationId" :closeDialog="closeDialog"></edit-form>
    </el-dialog>
  </div>
</template>

<script>
import { insertPTemplate,updateCUsedP,delCUsedP,getCUsedP} from '@/api/communicat'
import { getOrgList} from '@/api/org'
import util from '@/utils/util'
import editForm from './Dialog/UsefulTelSetForm'

export default {
  name: 'NineSmallVenuesSet',
  props: {
    
  },
  components: { 
    editForm
  },
  data () {
    return {
      formInline: {
        organizationId:/*this.$store.state.userinfo.isMuilUnitUser ? '' : */this.$store.state.userinfo.org.id,
      },
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [],//表格数据
      detailObj:{},//展开详情
      loading: false,
      orgOptions: [/*{organizationId: '', shortName: "业主单位"}*/],
      dialogFalg: false,
      editInfo: {  }// 编辑对应的表单信息
    }
  },
  created:function() {
    //绑定下拉框
    getOrgList({queryType: 0}).then((data)=>{
      this.formInline.organizationId = data.data[0].organizationId //默认选中第一个
      this.orgOptions.push.apply(this.orgOptions,data.data);
      this.getList()
    })    
  },
  methods: {
    getList(pageIndex, pageSize) {//获取列表
      this.loading =true;
      if (pageIndex) {
        this.currentPage = pageIndex
      }
      if (pageSize) {
        this.pageSize = pageSize
      }
      getCUsedP({
        organizationId: this.formInline.organizationId,
        pageSize: this.pageSize,
        pageIndex: this.currentPage - 1
      }).then((result) => {
        this.total = result.total;
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    addPlan(index, row) {
      this.dialogFalg = true
      this.editInfo = row||{}
    },
    insertPlan(){
      let that = this
      that.loading =true;
      insertPTemplate({
        organizationId: that.formInline.organizationId,
      }).then((res) => {
          if( res.status === 200) {
            that.$message({
              type: 'success',
              message: '模版插入成功!'
            })
            that.getList(1)
          }else{
            this.$message.error(res.info)
          }
      }) 
    },
    delPlan(index, row) {
      let that = this
      this.$confirm("确定删除？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        roundButton: true
      }).then(() => {
        delCUsedP({id: row.id}).then(res => {
          if( res.status === 200) {
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
            that.getList(1)
          }else{
            that.$message.error(res.info)
          }
        })
      }).catch(() => {

      })
    },
    closeDialog(refresh) {
      this.dialogFalg = false
      if(refresh) {
        this.getList(this.editInfo.id?'':1)
      }
    },
    handleSizeChange(pageSize) {
      this.getList(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getList(currentPage)
    },
  },
}
</script>